<template>
	<div class="org">
		<el-form ref="form" :model="form" label-width="80px" class="form">
			<div class="keyword">
				<el-form-item label="关键字">
					<el-input v-model="form.keyword" @keyup.enter.native="onEnterSubmit" placeholder="请输入名字/手机号/证件号关键字进行搜索" clearable></el-input>
				</el-form-item>
			</div>
			<div class="state">
				<el-form-item label="状态">
					<el-select v-model="form.state" @change="onSearch" placeholder="未审核">
						<el-option label="未审核" value="0"></el-option>
						<el-option label="已通过" value="1"></el-option>
						<el-option label="未通过" value="2"></el-option>
					</el-select>
				</el-form-item>
			</div>
			<div class="search">
				<el-button type="primary" @click="onSearch">搜索</el-button>
			</div>
			<div class="add_referee">
				<el-button type="primary" @click="addReferee">添加裁判</el-button>
			</div>
		</el-form>
		<div class="line"></div>
		<div class="orgTable">
			<el-table :data="tableData" stripe>
        <el-table-column prop="user_id" label="USER_ID" width="100">
        </el-table-column>
				<el-table-column prop="id" label="ID" width="60">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="100">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="60">
				</el-table-column>
				<el-table-column prop="date_of_birth" label="出生年月" width="120">
				</el-table-column>
				<el-table-column prop="phone" label="手机号码"  width="120">
				</el-table-column>
				<el-table-column prop="salt" label="密码"  width="120">
				</el-table-column>
				<el-table-column prop="id_card" label="证件号码"  width="180">
				</el-table-column>
				<el-table-column prop="" label="状态" width="80">
					<template slot-scope="scope">
						<span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 0">未审核</span>
						<span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 1">已通过</span>
						<span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 2">未通过</span>
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0" class="operation" @click="check(scope.$index, scope.row)">审核</span>
						<span v-if="scope.row.status == 1" class="operation"><span @click="checkInfo(scope.$index, scope.row)">查看信息</span>
							| <span @click="checkMatch(scope.$index, scope.row)">查看执裁赛事</span></span>
						<span v-if="scope.row.status == 2" class="operation" @click="checkInfo(scope.$index, scope.row)">查看信息</span>
					</template>
				</el-table-column>
			</el-table>
				<el-pagination background layout="total,prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;">
				</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					keyword: '',
					state: '',
				},
				tableData: [],
				total: null,
				currentPage: '',
			}
		},
		created() {
			this.get_allclub()
		},
		methods: {
			addReferee(){
				this.$router.push({
					path: '/index/User/umpireListInfo',
					query: {
						addreferee: 1,
					}
				})
			},
			onSearch() {
				this.get_allclub()
			},
			onEnterSubmit(){
				this.get_allclub()
			},
			get_allclub() {
				this.$axios.post('/UserManage/user_list', {
						search: this.form.keyword,
						type: 1,
						status: this.form.state,
						page: this.currentPage
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000 || res.data.code == 2001) {
							this.tableData = res.data.data.list
							console.log(this.tableData);
							this.total = res.data.data.count
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			ChangePage(page) {
				this.currentPage = page
				this.get_allclub()
			},
			check(index, row) {
				this.$router.push({
					path: '/index/User/umpireListCheck',
					query: {
						umpireListId: row.id,
					}
				})
			},
			checkInfo(index, row) {
				this.$router.push({
					path: '/index/User/umpireListInfo',
					query: {
						umpireListId: row.id,
						userId:row.user_id
					}
				})
			},
			checkMatch(index, row) {
				this.$router.push({
					path: '/index/User/umpireCheckMatch',
					query: {
						umpireListId: row.id,
						name: row.name
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.org {
		margin-top: 36px;

		.form {
			display: flex;
			margin-left: 26px;
			margin-bottom: 12px;

			.keyword {
				width: 410px;
			}

			.state {
				width: 200px;
			}

			.search,.add_referee {
				width: 123px;
				text-align: right;
			}
			.add_referee {
				margin-left: 28px;
			}
		}

		.line {
			width: 80%;
			/*height: 0.5px;*/
			border-top: 1px #dcdfe6 dotted
		}

		.orgTable {
			margin-top: 34px;
			margin-left: 40px;
		}
	}

	.ogg {
		color: #FF9800;
	}

	.green {
		color: #259B24;
	}

	.red {
		color: red;
	}

	.operation {
		color: #409EFF;
		cursor: pointer;
	}
</style>
